import  { useState, useEffect, useRef } from 'react';
import './Classification.scss'; // 后续会创建样式文件

const buttonList: { label: string; icon: string }[] = [
    { label: '全部分类', icon: '三' },
    { label: '小红书', icon: '📕' },
    { label: '小满', icon: '🌱' },
    { label: '公众号首图', icon: '🔥' },
    { label: '邀请函', icon: '💌' },
    { label: '倒计时', icon: '⏳' },
    { label: '日签', icon: '📅' },
    { label: '喜报', icon: '🏆' },
];
const categoryList = [
    {
        category: '电商平台',
        items: [
            '海报', '电商海报', '商品主图', '主图标', '店招', '胶囊banner', '详情页', '店铺首页', '商品关联列表',
            '弹窗广告', '闪屏', '小程序封面', '美团商品主图', '美团海报', '美团店招', '饿了么商品主图', '饿了么海报',
            '饿了么店招', '大众轮播图', '大众团购图', '大众推荐菜', '大众五连图', '大众中通图', '主图视频',
            '店铺首页视频'
        ]
    },
    {
        category: '小红书/公众号+',
        items: [
            '公众号首图', '公众号次图', '公众号双封面', '小红书封面', '小红书配图', '文章长图', '引导关注',
            '引导阅读原文', '引导在看提示', '静态二维码', '超链接配图', '分割线', '文章标题', '文章配图',
            '小红书动态封面', '抖音背景图', '视频封面', '视频边框', '小说封面', '微博封面', '专辑封面', 'B站封面',
            '6:7视频', '动态二维码'
        ]
    },
    {
        category: '微信/友圈+',
        items: ['头像', '海报', '动态表情包', '微信状态背景', '聊天背景图', '朋友圈封面', '红包封面', '微信红包挂件']
    },
    {
        category: '门店商超',
        items: ['印刷海报', '印刷折页', '展板', 'X展架', '售后卡', '手账', '手抄报', '优惠券', '道旗', '抽奖箱', '不干胶']
    },
    {
        category: '粉丝应援',
        items: ['手幅', '小卡', '透扇套装', '手机壳', '登机牌', '票根', '明信片', '便利贴', '杯套', '吧唧']
    },
    {
        category: '行政办公',
        items: ['名片', '工作证', '桌牌', '证件照', '易拉宝', '台历', '手提袋', '门票', '地贴', '红包', '画册', 'KT板', '背景视频']
    },
    {
        category: '直播',
        items: ['直播背景', '直播封面', '直播问装修']
    },
    {
        category: 'PPT',
        items: ['PPT单页', 'PPT套装 (4:3)', 'PPT套装 (16:9)',]
    },
    {
        category: 'H5',
        items: ['翻页H5', '长页H5']
    },
];
const categoryList1 = [
    {
        category: '用途',
        items: [
            '通用', '祝福问候', '营销卖货', '宣传推广', '商务活动', '科普攻略', '通知公告', '求职招聘', '企业行政',
            '生活娱乐', '校园生活', '互动功能', '创意玩法',
        ]
    },
    {
        category: '行业',
        items: [
            '教育培训', '企业服务', '金融', '房地产 ', '生活服务', '政务媒体', '文体娱乐', '旅游出行', '餐饮美食',
            '医疔保健', '商品零售', '服饰箱包', '美容美妆', '食品生鲜', '公益环保', '跨境出口', 'IT互联网',
        ]
    },
];

function Classification() {
    // 控制弹出框的显示与隐藏
    const [showPopup, setShowPopup] = useState(false);
    // 控制更多按钮的展开与收起
    const [showMore, setShowMore] = useState(false);
    // 控制电商平台分类额外项的显示与隐藏
    const [showExtraItems, setShowExtraItems] = useState(false);
    // 控制小红书/公众号+分类中引导阅读原文等项的显示与隐藏
    const [showRedGuide, setShowRedGuide] = useState(false);
    // 控制用途分类的更多按钮状态
    const [showPurposeMore, setShowPurposeMore] = useState(false);
    // 控制行业分类的更多按钮状态
    const [showIndustryMore, setShowIndustryMore] = useState(false);
    // 用于存储定时器的引用
    const timerRef = useRef<number | null>(null);
    // 用于引用弹出框元素
    const popupRef = useRef<HTMLDivElement>(null);

    // 鼠标进入按钮时的处理函数
    const handleMouseEnter = () => {
        // 清除之前的定时器
        if (timerRef.current) {
            clearTimeout(timerRef.current);
            timerRef.current = null;
        }
        // 显示弹出框
        setShowPopup(true);
    };

    // 鼠标离开按钮时的处理函数
    const handleMouseLeave = () => {
        // 设置定时器，延迟隐藏弹出框
        timerRef.current = window.setTimeout(() => {
            setShowPopup(false);
            timerRef.current = null;
        }, 500);
    };

    // 鼠标进入弹出框时的处理函数
    const handlePopupMouseEnter = () => {
        // 清除之前的定时器
        if (timerRef.current) {
            clearTimeout(timerRef.current);
            timerRef.current = null;
        }
    };

    // 鼠标离开弹出框时的处理函数
    const handlePopupMouseLeave = () => {
        // 设置定时器，延迟隐藏弹出框
        timerRef.current = window.setTimeout(() => {
            setShowPopup(false);
            timerRef.current = null;
        }, 300);
    };

    // 点击更多按钮时的处理函数
    const handleMoreClick = () => {
        // 切换更多按钮的状态
        setShowMore(!showMore);
        // 切换电商平台分类额外项的显示状态
        setShowExtraItems(!showExtraItems);
    };

    // 点击引导阅读原文更多按钮时的处理函数
    const handleRedGuideClick = () => {
        // 切换引导阅读原文等项的显示状态
        setShowRedGuide(!showRedGuide);
    };

    // 点击用途分类更多按钮时的处理函数
    const handlePurposeMoreClick = () => {
        // 切换用途分类的更多按钮状态
        setShowPurposeMore(!showPurposeMore);
    };

    // 点击行业分类更多按钮时的处理函数
    const handleIndustryMoreClick = () => {
        // 切换行业分类的更多按钮状态
        setShowIndustryMore(!showIndustryMore);
    };

    // 组件卸载时清除定时器
    useEffect(() => {
        return () => {
            if (timerRef.current) {
                clearTimeout(timerRef.current);
            }
        };
    }, []);

    return (
        <div className="classify-container">
            {/* 渲染按钮列表 */}
            {buttonList.map(({ label, icon }, index) => (
                <button
                    key={index}
                    className={`custom-button ${index === 0 && showPopup ? 'popup-show' : ''}`}
                    onMouseEnter={index === 0 ? handleMouseEnter : null}
                    onMouseLeave={index === 0 ? handleMouseLeave : null}
                >
                    {icon} {label}
                </button>
            ))}
            {showPopup && (
                <div
                    className="popup"
                    ref={popupRef}
                    onMouseEnter={handlePopupMouseEnter}
                    onMouseLeave={handlePopupMouseLeave}
                >
                    {/* 渲染第一个分类列表 */}
                    {categoryList.map(({ category, items }, categoryIndex) => (
                        <div key={categoryIndex} className="category-item">
                            <span className="category-title">{category}</span>
                            <div className="category-content">
                                {items.map((item, itemIndex) => {
                                    // 如果是电商平台分类，根据 showExtraItems 状态决定是否显示特定项
                                    if (category === '电商平台' && [
                                        '弹窗广告', '闪屏', '小程序封面', '美团商品主图', '美团海报', '美团店招', '饿了么商品主图', '饿了么海报',
                                        '饿了么店招', '大众轮播图', '大众团购图', '大众推荐菜', '大众五连图', '大众中通图', '主图视频',
                                        '店铺首页视频'
                                    ].includes(item)) {
                                        return showExtraItems ? <span key={itemIndex} className="item">{item}</span> : null;
                                    }
                                    // 如果是小红书/公众号+分类，根据 showRedGuide 状态决定是否显示引导阅读原文
                                    if (category === '小红书/公众号+' && [
                                        '引导阅读原文', '引导在看提示', '静态二维码', '超链接配图', '分割线', '文章标题', '文章配图',
                                        '小红书动态封面', '抖音背景图', '视频封面', '视频边框', '小说封面', '微博封面', '专辑封面', 'B站封面',
                                        '6:7视频', '动态二维码'
                                    ].includes(item)) {
                                        return showRedGuide ? <span key={itemIndex} className="item">{item}</span> : null;
                                    }
                                    return <span key={itemIndex} className="item">{item}</span>;
                                })}
                            </div>
                            {/* 如果是电商平台分类，显示更多按钮 */}
                            {category === '电商平台' && (
                                <span className="more-span" onClick={handleMoreClick}>
                                    {showMore ? '收起 ▲' : '更多 ▼'}
                                </span>
                            )}
                            {/* 如果是小红书/公众号+分类，显示更多按钮 */}
                            {category === '小红书/公众号+' && (
                                <span className="more-span" onClick={handleRedGuideClick}>
                                    {showRedGuide ? '收起 ▲' : '更多 ▼'}
                                </span>
                            )}
                        </div>
                    ))}
                    {categoryList1.map(({ category, items }, categoryIndex) => (
                        <div key={categoryIndex} className="category-item">
                            <span className="category-title">{category}</span>
                            <div className="category-content">
                                {items.map((item, itemIndex) => {
                                    // 如果是电商平台分类，根据 showExtraItems 状态决定是否显示特定项
                                    if (category === '用途' && [
                                        '生活娱乐', '校园生活', '互动功能', '创意玩法',
                                    ].includes(item)) {
                                        return showPurposeMore ? <span key={itemIndex} className="item">{item}</span> : null;
                                    }
                                    // 如果是小红书/公众号+分类，根据 showRedGuide 状态决定是否显示引导阅读原文
                                    if (category === '行业' && [
                                        '医疔保健', '商品零售', '服饰箱包', '美容美妆', '食品生鲜', '公益环保', '跨境出口', 'IT互联网',
                                    ].includes(item)) {
                                        return showIndustryMore ? <span key={itemIndex} className="item">{item}</span> : null;
                                    }
                                    return <span key={itemIndex} className="item">{item}</span>;
                                })}
                            </div>
                            {/* 如果是用途分类，显示更多按钮 */}
                            {category === '用途' && (
                                <span className="more-span" onClick={handlePurposeMoreClick}>
                                    {showPurposeMore ? '收起 ▲' : '更多 ▼'}
                                </span>
                            )}
                            {/* 如果是行业分类，显示更多按钮 */}
                            {category === '行业' && (
                                <span className="more-span" onClick={handleIndustryMoreClick}>
                                    {showIndustryMore ? '收起 ▲' : '更多 ▼'}
                                </span>
                            )}
                        </div>
                    ))}
                </div>
            )}
        </div>
    );
}

export default Classification;











